<template>
  <div class="markdown-preview">
    <MdEditor 
      :modelValue="safeContent"
      :editorId="editorId"
      codeTheme="atom-one-dark" 
      previewTheme="default" 
      previewOnly 
      :noMermaid="false"
      :noKatex="false"
      :style="{width: '100%'}"
      :height="height"
    />
    
    <!-- Debug info -->
    <div v-if="debug" style="margin-top: 10px; padding: 8px; background-color: #f0f0f0; border-radius: 4px; font-size: 12px;">
      <p>Content Type: {{ typeof content }}</p>
      <p>Content Length: {{ content ? content.length : 0 }}</p>
      <p>Safe Content: {{ safeContent ? safeContent.slice(0, 50) + '...' : '' }}</p>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { MdEditor } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'

export default {
  name: 'MarkdownPreview',
  components: {
    MdEditor
  },
  props: {
    content: {
      type: [String, Object],
      required: true,
      default: ''
    },
    editorId: {
      type: String,
      default: 'md-preview'
    },
    height: {
      type: [String, Number],
      default: 'auto'
    },
    debug: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const safeContent = computed(() => {
      // 确保内容是字符串
      if (typeof props.content === 'string') {
        return props.content
      } else if (props.content && typeof props.content === 'object') {
        try {
          return JSON.stringify(props.content)
        } catch (e) {
          console.error('Failed to stringify content', e)
          return ''
        }
      }
      return ''
    })
    
    return {
      safeContent
    }
  }
}
</script>

<style scoped>
.markdown-preview {
  width: 100%;
  margin: 0;
  padding: 0;
}
</style> 